<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="category">
        <div class="categoryNavt">
            <div>
                <div><span class="glyphicon glyphicon-folder-close"></span></div>
                <div>类别管理</div>
            </div>
            <div class="userNavT">
                <div>
                    <div><span class="glyphicon glyphicon-folder-close"></span></div>
                    <div>当前位置：</div>
                </div>
                <div>
                    类别管理
                </div>
            </div>
        </div>
        <div class="storeData">
            <div class="storeNav">
                <div class="seekStore">
                </div>
                <div @click="addPopupClick" class="addStore">
                    <div><span class="glyphicon glyphicon-download-alt"></span>添加</div>
                </div>
            </div>
            <div class="storeDetails" v-loading.body="loading" element-loading-text="拼命加载中">
                <ul>
                    <li class="firstLi">
                        <div class="imgLi">类别小图标</div>
                        <div>类别名称</div>
                        <div>添加时间</div>
                        <div>级别</div>
                        <div>操作</div>
                    </li>
                    <li v-if="nullShow" class="nullLi">
                        <div>暂时没有数据</div>
                    </li>
                    <li v-else class="dataLi" v-for="(item,index) in items">
                        <div class="imgLi"><img :src="item.icon | imgUrlFun" alt=""></div>
                        <div>{{item.typeName}}</div>
                        <div>{{item.ctime | ctimeFun}}</div>
                        <div>{{item.position}}</div>
                        <div>
                            <small @click="sortClick(index)"><span class="glyphicon glyphicon-arrow-up"></span>排序</small>
                            <small @click="deleteClick(index)">
                                <template>
                                   <el-button class="elbut" type="text"><span class="glyphicon glyphicon-trash"></span>删除</el-button>
                                </template>
                            </small>
                        </div>
                    </li>
                    <li class="lastLi">
                        <div class="lastSel">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[20, 40, 60, 80]" :page-size="pageSizeNum"
                                :current-page="currentPage" layout="total, sizes, prev, pager, next" :total="totalNum">
                                </el-pagination>
                        </div>
                        <div class="lastPag">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--添加弹出框-->
        <div :class="{addPopup:isAddPopup,showAdd:isShowAdd}" v-loading.body="adding" element-loading-text="添加中...">
            <transition name="slide-fade">
                <div class="addMain" v-show="addShow">
                    <div class="popupTitle">
                        <h2>添加类别</h2>
                        <div @click="callClick">
                            <img src="/static/img/icon_tanc_close.png" alt="">
                        </div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>类别小图标：</div>
                        <div id="upIcon">
                            <div v-show="showUpImage"><img class="showUpImage" :src="ipImage" alt=""></div>
                            <div v-if="!showUpImage">
                                <label for="filea">点击添加图片</label>
                                <input type="file" @change="headImageChange" name="file" id="filea" multiple>
                            </div>
                            <div v-else>
                                <div @click="removeUpImage" class="removeImage">点击删除图片</div>
                            </div>
                        </div>
                    </div>
                    <div class="addPone">
                        <div><small>*</small>类别名称：</div>
                        <div><input type="text" v-model="typeName" placeholder="请输入类别名称"></div>
                    </div>
                    <div class="promptC">
                        {{promptStr}}
                    </div>
                    <div class="addOper">
                        <button @click="addClick">添加</button>
                        <button @click="callClick">取消</button>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    require('../../../config/config.js')
    export default {
        name: 'category',
        data() {
            return {
                promptStr: '带 * 号为必填项',
                isAddPopup: true,
                isShowAdd: true,
                addShow: false,
                // 商户数组
                items: [
                ],
                pageSizeNum: 10,
                totalNum: 0,
                currentPage: 1,
                nullShow: true,
                loading: false,
                adding: false,
                // 添加用户对象
                typeName: '',
                allIndex: '',
                showUpImage: false,
                dataFile: {},
                ipImage: '',
                imgUrl: ''
            }
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            },
            imgUrlFun: function (val) {
                if (val) {
                    return "http://" + global.logIp + ":" + global.logFileport + "/files" + val
                } else {
                    return '/static/img/errimg.png'
                }
            }
        },
        created: function () {
            var userName = sessionStorage.getItem('userName')
          
        },
        methods: {
            // 上传图片文件
            headImageChange(e) {
                let self = this;
                var file = e.target.files[0]
                self.dataFile = e.target.files[0]
                // 看支持不支持FileReader
                if (!file || !window.FileReader) return;
                if (/^image/.test(file.type)) {
                    self.promptStr = '带 * 号为必填项'
                    // 创建一个reader
                    var image = new Image();
                    var reader = new FileReader();
                    // 将图片将转成 base64 格式
                    reader.readAsDataURL(file);
                    reader.onload = (e) => {
                        self.showUpImage = true;
                        self.ipImage = e.target.result;
                    };
                    self.imgUrl = window.URL.createObjectURL(file)
                } else {
                    self.promptStr = '图片格式只能为png或者jpg'
                }
            },
            removeUpImage() {
                this.showUpImage = false;
                this.ipImage = ''
                this.imgUrl = ''
            },
            // 汉字字母正则
            strReg: function (str) {
                var regu = "^([A-Za-z]|[\u4E00-\u9FA5]{1,50})+$"
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 商户设置每页个数
            handleSizeChange(val) {
                // var self = this;
                // self.pageSizeNum = val;
                // self.loading = true
                // self.getStoreAll({
                //     pageSize: val,
                //     number: 1
                // }).then((data) => {
                //     self.loading = false
                //     
                //     if (data.data.code == "200") {
                //         if (data.data.data.content.length > 0) {
                //             self.nullShow = false
                //             self.items = data.data.data.content
                //             self.totalNum = data.data.data.totalElements
                //         } else {
                //             self.nullShow = true
                //         }
                //     }
                // }).catch(msg => console.log(msg))
            },
            // 商户点击分页
            handleCurrentChange(val) {
                // var self = this;
                // self.loading = true
                // self.getStoreAll({
                //     pageSize: this.pageSizeNum,
                //     number: val
                // }).then((data) => {
                //     self.loading = false
                //     
                //     if (data.data.code == "200") {
                //         if (data.data.data.content.length > 0) {
                //             self.nullShow = false
                //             self.items = data.data.data.content
                //             self.totalNum = data.data.data.totalElements
                //         } else {
                //             self.nullShow = true
                //         }
                //     }
                // }).catch(msg => console.log(msg))
            },
            callClick() {
                this.addShow = false;
                this.isShowAdd = true
                this.typeName = ''
                this.ipImage = ''
                this.imgUrl = ''
                this.showUpImage = false;
            },
            // 弹出添加框
            addPopupClick() {
                this.isShowAdd = false;
                this.addShow = true;
            },
            // 添加类别
            addClick() {
                var self = this;
                var nameTrue = this.strReg(this.typeName)
                var userId = sessionStorage.getItem('userId')
                console.log(self.imgUrl.length)
                if (nameTrue == true && self.imgUrl.length > 0) {
                    self.promptStr = '带 * 号为必填项'
                    self.adding = true
                    // 添加类别
                    const formData = new FormData()
                    formData.append("file", self.dataFile)
                    var userId = sessionStorage.getItem('userId')
                    self.getNoticeFileAdd(formData).then((data) => {
                        console.log("上传后的图片", data.data.data[0])
                        if (data.data.code == "200") {
                            self.getTypeAdd({
                                opid: userId,
                                icon: data.data.data[0],
                                typeName: self.typeName
                            }).then((data) => {
                                
                                self.adding = false
                                if (data.data.code == "200") {
                                    self.loading = true
                                    self.isShowAdd = true
                                    self.isAddShow = false
                                    self.typeName = ''
                                    self.ipImage = ''
                                    self.imgUrl = ''
                                    self.showUpImage = false;
                                    self.$message({
                                        type: 'success',
                                        message: '添加成功!'
                                    });
                                    self.getTypeAll({
                                    }).then((data) => {
                                        
                                        self.loading = false
                                        if (data.data.code == "200") {
                                            if (data.data.data.length > 0) {
                                                self.nullShow = false
                                                self.items = data.data.data
                                                self.totalNum = data.data.data.length
                                            } else {
                                                self.nullShow = true
                                            }
                                        }
                                    }).catch(msg => console.log(msg))
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))

                } else {
                    if (this.imgUrl.length == 0) {
                        this.promptStr = '类别小图标为必填项'
                    } else if (nameTrue != true) {
                        this.promptStr = '类别名称为必填项'
                    }
                }
            },
            // 类别排序
            sortClick(index) {
                var userId = sessionStorage.getItem('userId')
                var self = this;
                self.loading = true
                self.getTypeSort({
                    opid: userId,
                    id: self.items[index].id
                }).then((data) => {
                    
                    self.loading = false
                    if (data.data.code == "200") {
                        self.$message({
                            type: 'success',
                            message: '排序成功!'
                        });
                        self.getTypeAll({
                        }).then((data) => {
                            
                            if (data.data.code == "200") {
                                if (data.data.data.length > 0) {
                                    self.nullShow = false
                                    // 初始化分页
                                    self.items = data.data.data
                                    self.totalNum = data.data.data.length
                                } else {
                                    self.nullShow = true
                                }
                            }
                        }).catch(msg => console.log(msg))
                    }
                }).catch(msg => console.log(msg))
            },
            // 删除类目
            deleteClick(index) {
                var self = this;
                var userId = sessionStorage.getItem('userId')
                var nameStr = "此操作将删除 " + this.items[index].typeName + " 该账户,是否继续 ?"
                self.$confirm(nameStr, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.getTypeDel({
                        opid: userId,
                        id: self.items[index].id
                    }).then((data) => {
                        
                        if (data.data.code == "200") {
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            self.loading = true
                            self.getTypeAll({
                            }).then((data) => {
                                self.loading = false
                                if (data.data.code == "200") {
                                    if (data.data.data.length > 0) {
                                        self.nullShow = false
                                        self.items = data.data.data
                                        self.totalNum = data.data.data.length
                                    } else {
                                        self.nullShow = true
                                    }
                                }
                            }).catch(msg => console.log(msg))
                        }
                    }).catch(msg => console.log(msg))
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
             ...mapActions(['getNoticeFileAdd','getTypeAdd','getTypeAll','getTypeDel','getTypeSort'])
        }
    }

</script>

<style scoped src="../../assets/css/category.css">

</style>